import { useEffect, useRef } from "react";
import { Prompt, useHistory, useLocation, useParams, useRouteMatch } from 'react-router-dom'
// props.location : useLocation（）
// props.histroy : useHistory（）
// props.match : useRouteMatch（）
// props.match.params: useParams（）

const Login = (props) => {
  const usernameRef = useRef()
  const pwdRef = useRef()

  const history = useHistory();
  const location = useLocation()
  const match = useRouteMatch();
  const param = useParams();


  const userLogin = () => {
    let params = {
      username: usernameRef.current.value,
      password: pwdRef.current.value
    }

    // console.log(params);

    // props.changeLoginState()


    // history.push("/course")  // 生成一条新的历史记录。
    // history.replace("/course")


    history.push("/product")
  }


  useEffect(() => {
    console.log('login:', props);
    console.log("location:", location);
    console.log("match:", match);
    console.log("param:", param);
    console.log("history:", history);


  })
  return (
    <div>
      <h1>LOGIN组件</h1>
      <div>
        UserName: <input type="text" ref={usernameRef} />
      </div>
      <div>
        PassWord: <input type="password" ref={pwdRef} />
      </div>
      <div>
        <button type='button' onClick={userLogin}>LOG IN</button>
      </div>
      <Prompt message="你确定要离开页面吗？"></Prompt>
      {/* 当你要跳路由离开此页面时，就会触发这个路由守卫，确定时，离开此页面，取消时，不离开此页面。 */}
    </div>
  )
}

export default Login;